<template>
  <div class="page-container">
    <div class="common-content-wrap">
      <div class="tab-handle-wrap fx-bt-ct">
        <div class="handoff">
          <div
            :class="{ selected: item.value == tagVal }"
            :key="item.value"
            v-for="item in tagList"
            @click="tagHandle(item)"
          >
            {{ item.label }}
          </div>
        </div>

        <div class="common-btn-wrap whiteStatus">删除</div>
      </div>
      <div class="file-img-list">
        <div
          class="file-img-item"
          v-for="(url, index) in valueList"
          :key="index"
        >
          <el-image :src="url" :preview-src-list="valueList"> </el-image>
          <div class="ab-icon choice"></div>
          <div class="ab-icon delete"></div>
        </div>

        <UploadBtn v-model="valueList" />
      </div>
    </div>
  </div>
</template>

<script>
import UploadBtn from "@/components/upload-btn/Upload-btn.vue";
export default {
  name: "textBox",
  components: {
    UploadBtn,
  },
  data: () => ({
    tagVal: 1,
    tagList: [
      { label: "工艺路线", value: 1 },
      { label: "关联产品", value: 2 },
      { label: "工序采集", value: 3 },
    ],
    valueList: [
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
      "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
      "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
      "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
      "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
      "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
    ],
  }),
  methods: {
    tagHandle(tagObj) {
      if (!tagObj.value == this.tagVal) return;
      this.tagVal = tagObj.value;
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.common-content-wrap {
  background-color: #fff;
  padding: 24px;
}
.file-img-item {
  position: relative;
  width: 272px;
  height: 154px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  &::before {
    z-index: 1;
    transition: all 0.3s;
    pointer-events: none;
    position: absolute;
    display: block;
    opacity: 0;
    content: "";
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
    border-radius: 2px;
  }
  &:hover {
    &::before,
    &::after,
    .ab-icon {
      opacity: 1;
    }
  }
}
.file-img-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.ab-icon {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 12px;
  z-index: 2;
  opacity: 0;
  &.choice {
    left: 12px;
  }
  &.delete {
    right: 12px;
    background: url("~@/assets/icons/scale.png");
    background-size: cover;
    background-repeat: no-repeat;
  }
}
</style>
